<template>
  <div>
   <el-card>
     <div slot="header" class="clearfix">
       <el-button @click="jumpToCreate">寻求指导</el-button>
       <el-button @click="jumpToCreate">经验分享</el-button>
     </div>
     <div>
       <article v-for="(item, index) in articleList" :key="index" class="media">
         <div class="media-left">
           <figure class="image is-48x48">
             <img :src="item.avatar" style="border-radius: 5px;">
           </figure>
         </div>
         <div class="media-content">
           <div class="">
             <p class="ellipsis is-ellipsis-1">
               <el-tooltip class="item" effect="dark" :content="item.title" placement="top">
                 <router-link :to="{name:'StudyGuideDetail',params:{id:item.id}}">
                   <span class="is-size-6">{{ item.title }}</span>
                 </router-link>
               </el-tooltip>
             </p>
           </div>
           <nav class="level has-text-grey is-mobile  is-size-7 mt-2">
             <div class="level-left">
               <div class="level-left">
                 <router-link class="level-item" :to="{ path: `/member/${item.username}/home` }">
                   {{ item.alias }}
                 </router-link>

                 <span class="mr-1">
                        发布于:{{ dayjs(item.createTime).format("YYYY/MM/DD") }}
                      </span>

                 <span
                     v-for="(tag, index) in item.tags"
                     :key="index"
                     class="tag is-hidden-mobile is-success is-light mr-1"
                 >
                        <router-link :to="{ name: 'tag', params: { name: tag.name } }">
                          {{ "#" + tag.name }}
                        </router-link>
                      </span>

                 <span class="is-hidden-mobile">浏览:{{ item.view }}</span>
               </div>
             </div>
           </nav>
         </div>
         <div class="media-right"/>
       </article>

     </div>
     <pagination
         v-show="page.total > 0"
         :total="page.total"
         :page.sync="page.current"
         :limit.sync="page.size"
         @pagination="fetchData"
     />
   </el-card>
  </div>
</template>

<script>
import {getStudyGuideList} from "@/api/study-guide";
import Pagination from "@/components/Pagination/index.vue";

export default {
  name: "StudyGuide",
  components:{
    Pagination
  },
  data() {
    return {
      activeName: "1",
      articleList: [],
      page: {
        current: 1,
        size: 10,
        total: 0,
        tab: 'latest',
        type:1
      }
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    jumpToCreate(){
      this.$router.push({
        path:'/study-guide/create',
        params:{
          tip:'求指导'
        }
      })
    },
    fetchData(){
      getStudyGuideList(this.page.current,this.page.size).then(res=>{
        this.articleList=res.data.data;
        this.page.total=res.data.total
      })
    }
  }
}
</script>

<style scoped>
</style>